<!DOCTYPE html>
<html>

<head>
    <title>{$node.node_title}</title>
    {include file="common/header"/}

    <el-form :inline="true">
        <el-form-item>
            <el-button type="primary" icon="el-icon-edit" size="small" @click="clickAdd">添加</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="postMultDelete">批量删除</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="dataList" @selection-change="changeSelection" v-loading="loading">
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column prop="group_id" label="组ID" width="100">
        </el-table-column>
        <el-table-column prop="group_name" label="组名称" width="200">
        </el-table-column>
        <el-table-column prop="group_desc" label="组描述">
        </el-table-column>
        </el-table-column>
        <el-table-column label="禁用" width="80">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.group_status==1?true:false" active-color="#ff4949"
                    @change="clickStatus(scope.row)">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-link type="info" @click="clickEdit(scope.row)" :underline="false"><i class="el-icon-edit"></i>编辑
                </el-link>
                <el-link type="info" @click="clickAuth(scope.row)" :underline="false"><i class="el-icon-lock"></i>授权
                </el-link>
                <el-link type="danger" @click="clickDelete(scope.row)" :underline="false"><i
                        class="el-icon-delete"></i>删除</el-link>
            </template>
        </el-table-column>

    </el-table>



    <!-- 添加框 -->
    <el-dialog title="添加用户组" :visible.sync="dialogFormAdd" :modal-append-to-body='false'>
        <el-form :model="formAdd" status-icon :rules="rules" ref="formAdd">
            <el-form-item label="组名称" :label-width="formLabelWidth" prop="group_name">
                <el-input size="medium" autocomplete="off" v-model="formAdd.group_name"></el-input>
            </el-form-item>
            <el-form-item label="组描述" :label-width="formLabelWidth">
                <el-input size="medium" autocomplete="off" v-model="formAdd.group_desc"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="postAdd">确认添加</el-button>
        </div>
    </el-dialog>
    <!-- 修改框 -->
    <el-dialog title="修改用户组" :visible.sync="dialogFormEdit" :modal-append-to-body='false'>
        <el-form :model="formEdit" status-icon :rules="rules" ref="formEdit">
            <el-form-item label="组名称" :label-width="formLabelWidth" prop="group_name">
                <el-input size="medium" autocomplete="off" v-model="formEdit.group_name"></el-input>
            </el-form-item>
            <el-form-item label="组描述" :label-width="formLabelWidth">
                <el-input size="medium" autocomplete="off" v-model="formEdit.group_desc"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="postEdit">确认修改</el-button>
        </div>
    </el-dialog>
    <!-- 授权框 -->
    <el-dialog class="pub_dialog" title="用户组授权" :visible.sync="dialogFormAuth" :modal-append-to-body='false'
        width="60%">
        <el-card class="box-card" v-for="(item,index) in nodeList" style="margin:10px 20px;">
            <div slot="header" class="clearfix">
                <span>{{item.node_title}}</span>
                <el-button style="float: right; padding: 3px 0" type="text">
                    <el-checkbox v-model="item.node_status" @change="handleCheckAllChange($event,item,index)">全选
                    </el-checkbox>
                </el-button>
            </div>
            <div>
                <el-checkbox v-for="(sub_item,sub_index) in item.sub" @change="handleCheckedChange($event,sub_item)"
                    v-model="sub_item.node_status">
                    {{sub_item.node_title}}</el-checkbox>
            </div>
        </el-card>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="postAuth">确认授权</el-button>
        </div>
    </el-dialog>

    {include file="common/footer"/}
    <script>
        new Vue({
            el: '#app',
            data() {
                this.getList();
                return {
                    checkAll: false,
                    search: {
                        group_status: "",
                        keyword: "",
                        filter: "group_id"
                    },
                    formLabelWidth: '80px',
                    dialogFormAdd: false,
                    dialogFormEdit: false,
                    dialogFormAuth: false,
                    loading: true,
                    dataList: [],
                    groupList: [],
                    selectList: [],
                    selectNodeList: [],
                    selectedGroupId: 0,
                    nodeList: [],
                    form: {
                        page: 1
                    },
                    formAdd: {},
                    formEdit: {},
                    rules: {
                        group_name: [
                            { required: true, message: '组名称必须填写', trigger: 'blur' },
                        ],
                    }
                }
            },
            methods: {
                handleCheckAllChange(selectAll, item, index) {
                    var that = this;
                    if (selectAll) {
                        for (var _index in item.sub) {
                            that.nodeList[index].sub[_index].node_status = true;
                            if (that.selectNodeList.indexOf(item.sub[_index].node_id) < 0) {
                                that.selectNodeList.push(item.sub[_index].node_id);
                            }
                        }
                        that.selectNodeList.push(item.node_id);
                    } else {
                        for (var _index in item.sub) {
                            that.nodeList[index].sub[_index].node_status = false;
                            var _existIndex = that.selectNodeList.indexOf(item.sub[_index].node_id);
                            if (_existIndex >= 0) {
                                that.selectNodeList.splice(_existIndex, 1);
                            }
                            _existIndex = that.selectNodeList.indexOf(item.node_id);
                            if (_existIndex >= 0) {
                                that.selectNodeList.splice(_existIndex, 1);
                            }
                        }
                    }
                },
                handleCheckedChange(checked, item) {
                    var that = this;
                    if (checked) {
                        if (that.selectNodeList.indexOf(item.node_id) < 0) {
                            that.selectNodeList.push(item.node_id);
                        }
                    } else {
                        var _existIndex = that.selectNodeList.indexOf(item.node_id);
                        if (_existIndex >= 0) {
                            that.selectNodeList.splice(_existIndex, 1);
                        }
                    }
                },
                refreshCheckbox() {

                },
                postMultDelete() {
                    var that = this;
                    if (that.selectList.length == 0) {
                        that.$message.error('未选择任何用户！');
                        return;
                    }
                    this.$confirm('即将删除选中的用户, 是否确认?', '批量删除', {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/api/group/delete', Object.assign({}, PostBase, {
                            group_id: that.selectList.join(",")
                        }))
                            .then(function (response) {
                                that.getList();
                                if (response.data.code == CODE_SUCCESS) {
                                    that.$message({
                                        message: response.data.msg,
                                        type: 'success'
                                    });
                                } else {
                                    that.$message.error(response.data.msg);
                                }
                            })
                            .catch(function (error) {
                                that.$message.error('服务器内部错误');
                                console.log(error);
                            });
                    }).catch(() => {
                    });
                },
                changeSelection(list) {
                    var that = this;
                    that.selectList = [];
                    for (var index in list) {
                        that.selectList.push(list[index].group_id);
                    }
                },
                postAuth() {
                    var that = this;
                    axios.post('/api/group/authorize', Object.assign({}, PostBase, {
                        node_ids: that.selectNodeList.join(','),
                        group_id: that.selectedGroupId
                    }))
                        .then(function (response) {
                            if (response.data.code == CODE_SUCCESS) {
                                that.$message({
                                    message: response.data.msg,
                                    type: 'success'
                                });
                                that.dialogFormAuth = false;
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                },
                postEdit() {
                    var that = this;
                    that.$refs['formEdit'].validate((valid) => {
                        if (!valid) {
                            that.$message.error('仔细检查检查，是不是有个地方写得不对？');
                            return;
                        }
                        axios.post('/api/group/update', Object.assign({}, PostBase, that.formEdit))
                            .then(function (response) {
                                that.getList();
                                if (response.data.code == CODE_SUCCESS) {
                                    that.$message({
                                        message: response.data.msg,
                                        type: 'success'
                                    });
                                    that.dialogFormEdit = false;
                                } else {
                                    that.$message.error(response.data.msg);
                                }
                            })
                            .catch(function (error) {
                                that.$message.error('服务器内部错误');
                                console.log(error);
                            });
                    });
                },
                postAdd() {
                    var that = this;
                    that.$refs['formAdd'].validate((valid) => {
                        if (!valid) {
                            that.$message.error('仔细检查检查，是不是有个地方写得不对？');
                            return;
                        }
                        axios.post('/api/group/add', Object.assign({}, PostBase, that.formAdd))
                            .then(function (response) {
                                that.getList();
                                if (response.data.code == CODE_SUCCESS) {
                                    that.$message({
                                        message: response.data.msg,
                                        type: 'success'
                                    });
                                    that.dialogFormAdd = false;
                                } else {
                                    that.$message.error(response.data.msg);
                                }
                            })
                            .catch(function (error) {
                                that.$message.error('服务器内部错误');
                                console.log(error);
                            });
                    });
                },
                clickAdd() {
                    var that = this;
                    that.formAdd = {};
                    axios.post('/api/group/getList', Object.assign({}, PostBase))
                        .then(function (response) {
                            that.groupList = response.data.data;
                            if (response.data.code == CODE_SUCCESS) {
                                that.dialogFormAdd = true;
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                },
                clickDelete(row) {
                    var that = this;
                    this.$confirm('即将删除这个用户, 是否确认?', '删除提醒', {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/api/group/delete', Object.assign({}, PostBase, {
                            group_id: row.group_id
                        }))
                            .then(function (response) {
                                that.getList();
                                if (response.data.code == CODE_SUCCESS) {
                                    that.$message({
                                        message: response.data.msg,
                                        type: 'success'
                                    });
                                } else {
                                    that.$message.error(response.data.msg);
                                }
                            })
                            .catch(function (error) {
                                that.$message.error('服务器内部错误');
                                console.log(error);
                            });
                    }).catch(() => {
                    });
                },
                clickStatus(row) {
                    var that = this;
                    axios.post(row.group_status ? '/api/group/enable' : '/api/group/disable', Object.assign({}, PostBase, {
                        group_id: row.group_id
                    }))
                        .then(function (response) {
                            that.getList();
                            if (response.data.code == CODE_SUCCESS) {
                                that.$message({
                                    message: response.data.msg,
                                    type: 'success'
                                });
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                },
                clickAuth(row) {
                    var that = this;
                    that.selectNodeList = [];
                    that.selectedGroupId = row.group_id;
                    axios.post('/api/node/getList', Object.assign({}, PostBase))
                        .then(function (response) {
                            if (response.data.code == CODE_SUCCESS) {
                                that.nodeList = response.data.data.data;
                                that.dialogFormAuth = true;
                                that.getAuthList(row);
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                },
                getAuthList(row) {
                    var that = this;
                    axios.post('/api/group/getAuthorize', Object.assign({}, PostBase, {
                        group_id: row.group_id
                    }))
                        .then(function (response) {
                            if (response.data.code == CODE_SUCCESS) {
                                that.selectNodeList = [];
                                for (var i in response.data.data) {
                                    that.selectNodeList.push(response.data.data[i].auth_node);
                                }
                                for (var i in that.nodeList) {
                                    that.nodeList[i].node_status = false;
                                    if (that.selectNodeList.indexOf(that.nodeList[i].node_id) >= 0) {
                                        that.nodeList[i].node_status = true;
                                    }
                                    for (var j in that.nodeList[i].sub) {
                                        that.nodeList[i].sub[j].node_status = false;
                                        if (that.selectNodeList.indexOf(that.nodeList[i].sub[j].node_id) >= 0) {
                                            that.nodeList[i].sub[j].node_status = true;
                                        }
                                    }
                                }
                                that.dialogFormAuth = true;
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('设置选中状态失败');
                        });
                },
                clickEdit(row) {
                    var that = this;
                    that.formEdit = row;
                    axios.post('/api/group/getList', Object.assign({}, PostBase))
                        .then(function (response) {
                            if (response.data.code == CODE_SUCCESS) {
                                that.groupList = response.data.data;
                                axios.post('/api/group/detail', Object.assign({}, PostBase, {
                                    group_id: row.group_id
                                }))
                                    .then(function (response) {
                                        if (response.data.code == CODE_SUCCESS) {
                                            that.formEdit = response.data.data;
                                            that.dialogFormEdit = true;
                                        } else {
                                            that.$message.error(response.data.msg);
                                        }
                                    })
                                    .catch(function (error) {
                                        that.$message.error('服务器内部错误');
                                        console.log(error);
                                    });
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });

                },
                changeCurrentPage(page) {
                    this.form.page = page;
                    this.getList();
                },
                getList() {
                    var that = this;
                    that.loading = true;
                    axios.post('/api/group/getList', Object.assign({}, PostBase, that.form, that.search))
                        .then(function (response) {
                            that.loading = false;
                            if (response.data.code == CODE_SUCCESS) {
                                that.dataList = response.data.data;
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.loading = false;
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                }
            }
        })
    </script>


</html>